<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h3>BCF</h3>
  <h4>产生BFC</h4>
  <em>普通流 ------》normal flow</em>
  <em>浮动流 ------》float</em>
  <em>绝对定位 ------》absolute relative</em>
  <p>float:left | right</p>
  <p>position:absolute | fixed</p>
  <p>display:inline-block | table-cell</p>
  <p>overflow:hidden | auto | scroll</p>
  <h4>解决的问题：</h4>
  <p>1.解决双边距margin。给父元素设置成BFC</p>
  <p>2.子元素浮动导致父元素塌陷问题，但是我们一般不这样做</p>
  <p>3.子元素设置margin-top，那父元素也会向下走</p>
  <p>4.解决float产生的覆盖问题</p>
</body>

</html>